---
layout: single
property_name: resize
---

<section id="resize" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/resize/" data-property-name="resize" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="resize">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/resize" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#resize"><span>#</span>resize</a>
    </h2>
    <div class="property-description">
      <p>Defines if the textarea is resizable or not.</p>

    </div>

  </header>



    <style type="text/css">.resize textarea { background: #fff;border: 1px solid hsl(0, 0%, 50%);color: hsl(0, 0%, 20%);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;height: 10em;padding: 0.8em 1em;width: 25em; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="resize: none;">resize: none;</code>
        </p>
        <div class="example-description">
          <p>The textarea is <strong>not</strong> resizable.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div resize " id="resize-none"><textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</textarea></div>
        </div>
      </aside>
          <style type="text/css">#resize-none{ resize:none;}</style>
        <style type="text/css">#resize-none textarea { resize: none; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="resize: horizontal;">resize: horizontal;</code>
        </p>
        <div class="example-description">
          <p>The textarea is resizable <strong>horizontally</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div resize " id="resize-horizontal"><textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</textarea></div>
        </div>
      </aside>
          <style type="text/css">#resize-horizontal{ resize:horizontal;}</style>
        <style type="text/css">#resize-horizontal textarea { resize: horizontal; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="resize: vertical;">resize: vertical;</code>
        </p>
        <div class="example-description">
          <p>The textarea is resizable <strong>vertically</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div resize " id="resize-vertical"><textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</textarea></div>
        </div>
      </aside>
          <style type="text/css">#resize-vertical{ resize:vertical;}</style>
        <style type="text/css">#resize-vertical textarea { resize: vertical; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="resize: both;">resize: both;</code>
        </p>
        <div class="example-description">
          <p>The textarea is resizable both <strong>horizontally</strong> and <strong>vertically</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div resize " id="resize-both"><textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</textarea></div>
        </div>
      </aside>
          <style type="text/css">#resize-both{ resize:both;}</style>
        <style type="text/css">#resize-both textarea { resize: both; }</style>
    </section>

</section>
